<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web-Bench Tailwind</title>
    <script src="./assets/tailwind-css.js"></script>
  </head>
  <body class="h-lvh overflow-hidden">
    <div
      class="root h-full grid grid-rows-[auto_1fr_auto] grid-cols-[auto_1fr_auto] overflow-hidden max-[399px]:grid-rows-[auto_auto_1fr_fit-content_auto] max-[399px]:grid-cols-[auto]"
    >
      <div
        class="header col-span-3 bg-gray-100 grid grid-cols-[auto_max-content] items-center p-2.5 max-[399px]:p-0"
      >
        <div class="logo w-10 h-10 bg-gray-600 rounded-full max-[399px]:hidden"></div>
        <div class="menu grid grid-cols-3 gap-5 max-[399px]:justify-evenly max-[399px]:grid-cols-1">
          <div class="menu-item px-2.5 py-1.5 bg-gray-300 rounded text-center">Menu 1</div>
          <div class="menu-item px-2.5 py-1.5 bg-gray-300 rounded text-center">Menu 2</div>
          <div class="menu-item px-2.5 py-1.5 bg-gray-300 rounded text-center">Menu 3</div>
        </div>
      </div>

      <div
        class="leftbar w-[min(200px,20vw)] bg-gray-200 grid grid-cols-2 overflow-y-hidden max-[799px]:hidden"
      >
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
        <div class="leftbar-cell p-1 px-1.5 bg-white break-words overflow-hidden leading-tight">
          this is a very long text sample to test word wrap
        </div>
      </div>

      <div
        class="content bg-white grid grid-cols-3 relative overflow-y-auto group max-[399px]:col-span-3 max-[999px]:grid-cols-2 max-[599px]:grid-cols-1"
      >
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$199.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$99.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto order-last"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$299.99</div>
        </div>
        <div
          class="card grid grid-rows-[1fr_auto_auto] bg-gray-100 border border-gray-300 min-h-[100px] overflow-auto"
        >
          <div class="card-image bg-gray-300 grid place-items-center"></div>
          <div class="card-title bg-gray-300 grid place-items-center">
            Long Product Title That Goes Here
          </div>
          <div class="card-price min-h-4 grid items-center px-2.5 font-bold">$399.99</div>
        </div>

        <div
          class="left-drag invisible group-hover:visible w-1 hover:w-3 absolute left-0 top-0 h-full cursor-ew-resize bg-gray-400 transition-all duration-200 ease-in max-[399px]:hidden"
        ></div>
        <div
          class="right-drag invisible group-hover:visible w-1 hover:w-3 absolute right-0 top-0 h-full cursor-ew-resize bg-gray-400 transition-all duration-200 ease-in max-[399px]:bottom-0 max-[399px]:top-auto max-[399px]:bottom-0 max-[399px]:w-full max-[399px]:h-1 max-[399px]:hover:h-3"
        ></div>
      </div>

      <div
        class="rightbar w-[max(200px,20vw)] overflow-y-hidden grid grid-cols-2 auto-rows-fr max-[399px]:col-span-3 max-[399px]:w-full"
      >
        <div class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight">
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight">
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight">
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight">
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight">
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight">
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
        <div
          class="rightbar-cell p-0.5 px-1 break-all overflow-hidden leading-tight max-[399px]:hidden"
        >
          this-is-a-very-long-text-sample-to-test-overflow
        </div>
      </div>

      <div class="footer col-span-3 bg-gray-100 p-5 grid grid-cols-[auto_1fr] items-center gap-4">
        <div class="footer-logo w-[50px] h-[50px] bg-gray-600 rounded-full"></div>
        <div class="footer-info whitespace-nowrap overflow-hidden text-ellipsis max-w-full">
          Company Name - Detailed Information About the Company That Might Be Long
        </div>
      </div>
    </div>

    <script>
      let isDragging = false
      let isRightDragging = false
      let isLeftDragging = false
      let startX
      let startY
      let contentStartWidth
      let contentStartHeight
      let leftbarStartWidth
      let rightbarStartWidth
      let rightbarStartHeight

      function initDragHandlers() {
        const content = document.querySelector('.content')
        const leftbar = document.querySelector('.leftbar')
        const rightbar = document.querySelector('.rightbar')
        const leftDrag = document.querySelector('.left-drag')
        const rightDrag = document.querySelector('.right-drag')

        rightDrag.addEventListener('mousedown', (e) => {
          isDragging = true
          isRightDragging = true
          startX = e.pageX
          startY = e.pageY
          contentStartWidth = content.offsetWidth
          contentStartHeight = content.offsetHeight
          rightbarStartWidth = rightbar.offsetWidth
          rightbarStartHeight = rightbar.offsetHeight
        })

        leftDrag.addEventListener('mousedown', (e) => {
          isDragging = true
          isLeftDragging = true
          startX = e.pageX
          contentStartWidth = content.offsetWidth
          leftbarStartWidth = leftbar.offsetWidth
        })

        document.addEventListener('mousemove', (e) => {
          if (!isDragging) return

          if (window.innerWidth <= 400 && isRightDragging) {
            // Vertical dragging
            const deltaY = e.pageY - startY
            const newContentHeight = contentStartHeight + deltaY
            const newRightbarHeight = rightbarStartHeight - deltaY

            content.style.height = newContentHeight + 'px'
            rightbar.style.height = newRightbarHeight + 'px'
          } else {
            // Normal horizontal
            const deltaX = e.pageX - startX

            if (isRightDragging) {
              const newContentWidth = contentStartWidth + deltaX
              const newRightbarWidth = rightbarStartWidth - deltaX
              content.style.width = newContentWidth + 'px'
              rightbar.style.width = newRightbarWidth + 'px'
            }

            if (isLeftDragging) {
              const newContentWidth = contentStartWidth - deltaX
              const newLeftbarWidth = leftbarStartWidth + deltaX
              content.style.width = newContentWidth + 'px'
              leftbar.style.width = newLeftbarWidth + 'px'
            }
          }

          e.preventDefault()
        })

        document.addEventListener('mouseup', () => {
          isDragging = false
          isRightDragging = false
          isLeftDragging = false
        })
      }

      document.addEventListener('DOMContentLoaded', initDragHandlers)
    </script>
  </body>
</html>
